<template>
    <div class="content">
        <div class="inn-btn cursor"></div>
        <Tabs type="line" value="name1">
            <TabPane label="新员工录入" name="name1">
                <div class="center">
                    <div class="center_top">
                        <span class="center_title">员工信息</span>
                        <span class="center_info">(信息保存并获取授权后即可免费合适身份、手机实名和社会不良记录)</span>
                    </div>
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"  :label-width="80">
                        <FormItem label="姓名" prop="name">
                            <Input class="oInput" size="large" v-model="formValidate.name" placeholder="请输入姓名"></Input>
                        </FormItem>
                        <FormItem label="证件号码" prop="idCard">
                            <Input class="oInput" size="large" v-model="formValidate.idCard" placeholder="请输入证件号"></Input>
                        </FormItem>
                        <FormItem label="手机号码" prop="mobile">
                            <Input class="oInput" size="large" v-model="formValidate.mobile" placeholder="请输入姓名"></Input>
                        </FormItem>
                        <div class="form_middle">
                            为保证后续业务开展，请保证以上信息输入无误
                        </div>
                        <FormItem label="职位" prop="position">
                            <Input class="oInput" size="large" v-model="formValidate.position" placeholder="请输入员工当前职位"></Input>
                        </FormItem>
                        <FormItem label="入职日期" prop="entryTime">
                            <DatePicker class="oInput" size="large" :value="formValidate.entryTime" format="yyyy-MM-dd" type="date" placement="bottom-end" placeholder="请选择入职日期"></DatePicker>
                        </FormItem>
                    </Form>
                    <span class="foot cursor">入职通知</span>
                    <span class="foot cursor">入职并背调</span>
                    <span class="foot_miss cursor">取消</span>
                    <div class="foot_info">
                        发起申请后会发送手机短信邀请TA确认授权申请
                    </div>
                </div>
            </TabPane>
            <TabPane label="已入职员工录入" name="name2">
                <div class="center">
                    <div class="center_top">
                        <span class="center_title">员工信息</span>
                        <span class="center_info">(信息保存并获取授权后即可免费合适身份、手机实名和社会不良记录)</span>
                    </div>
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"  :label-width="80">
                        <FormItem label="姓名" prop="name">
                            <Input class="oInput" size="large" v-model="formValidate.name" placeholder="请输入姓名"></Input>
                        </FormItem>
                        <FormItem label="证件号码" prop="idCard">
                            <Input class="oInput" size="large" v-model="formValidate.idCard" placeholder="请输入证件号"></Input>
                        </FormItem>
                        <FormItem label="手机号码" prop="mobile">
                            <Input class="oInput" size="large" v-model="formValidate.mobile" placeholder="请输入姓名"></Input>
                        </FormItem>
                        <div class="form_middle">
                            为保证后续业务开展，请保证以上信息输入无误
                        </div>
                        <FormItem label="职位" prop="position">
                            <Input class="oInput" size="large" v-model="formValidate.position" placeholder="请输入员工当前职位"></Input>
                        </FormItem>
                        <FormItem label="入职日期" prop="entryTime">
                            <DatePicker class="oInput" size="large" :value="formValidate.entryTime" format="yyyy-MM-dd" type="date" placement="bottom-end" placeholder="请选择入职日期"></DatePicker>
                        </FormItem>
                    </Form>
                    <span class="foot cursor">录入</span>
                    <span class="foot cursor">录入并背调</span>
                    <span class="foot_miss cursor">取消</span>
                    <div class="foot_info">
                        发起申请后会发送手机短信邀请TA确认授权申请
                    </div>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    idCard: '',
                    mobile: '',
                    position: '',
                    entryTime: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '请输入正确的姓名', trigger: 'blur' }
                    ],
                    idCard: [
                        { required: true, message: '请输入正确的证件号', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入正确的手机', trigger: 'blur' }
                    ],
                    position: [
                        { required: true, message: '请输正确职位', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
            }
            })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .content{
        width:1150px;
    }
    .cursor:hover{
        cursor:pointer;
    }
    .inn-btn{
        position: absolute;
        z-index: 99;
        left: 1033px;
        width: 122px;
        height: 52px;
        background-image: url("../../assets/img/secret/secret-0.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn:hover{
        background-image: url("../../assets/img/secret/secret-1.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .content .ivu-tabs-bar {
        margin-bottom: 0!important;
    }
    .center{
        width:1150px;
        min-height:560px;
        background: #FFFFFF;
        box-shadow: 0 3px 10px 2px rgba(162,181,199,0.15);
        padding: 30px 0 0 50px;
        margin-bottom: 200px;
    }
    .center_1{
        width:1150px;
        min-height:560px;
        background: pink;
        box-shadow: 0 3px 10px 2px rgba(162,181,199,0.15);
        padding: 30px 0 0 50px;
        margin-bottom: 200px;
    }
    .oInput{
        width:300px;
        height:40px;
    }
    .center .center_top{
        margin-bottom: 20px;
    }
    .center .center_title{
         font-size: 20px;
         color: #323C47;
     }
    .center .center_info{
        font-size: 12px;
        color: #0093FF;
        letter-spacing: 0;
        margin-left: 15px;
    }
    .form_middle{
        font-size: 12px;
        color: #FF8448;
        margin-left: 95px;
        margin-bottom: 20px;
    }
    .foot{
        display: inline-block;
        width:160px;
        height: 40px;
        background: #FF8448;
        border-radius: 2px;
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
        line-height: 40px;
        margin-left: 10px;
    }
    .foot_miss{
        display: inline-block;
        width:160px;
        height: 40px;
        border: 1px solid #FF8448;
        border-radius: 2px;
        font-size: 14px;
        color: #FF8448;
        text-align: center;
        line-height: 40px;
        margin-left: 10px;
    }
    .foot_info{
        font-size: 12px;
        color: #FF8448;
        margin-left: 10px;
        margin-top: 14px;
    }

</style>
